<template>
	<view class="content">
		<!-- 轮播图 -->
		<swiper indicator-dots :autoplay="true" :interval="2000" circular class="swiper">
		      <swiper-item>
		        <image src="@/static/images/swiper1.jpg"></image>
		      </swiper-item>
		      <swiper-item>
		        <image src="@/static/images/swiper2.png"></image>
		      </swiper-item>
		      <swiper-item>
		        <image src="@/static/images/swiper3.jpg"></image>
		      </swiper-item>
		    </swiper>
		<!-- 职位认证 -->
	     <view>
			<view class="job">
			     <view class="job_container">
					 <view class="container1">
						 <view style="flex: 1;">申请认证财务顾问</view>
						 <view style="flex: 1;color: #efceb0;">专业兼职赚米</view>
					 </view>
					 <view class="container2">
						 <button class="btn">申请认证</button>
					 </view>
				 </view>
			</view>
		 </view>
		 <!-- 首页四个小模块 -->
		<view class="module">
			<view class="modules">
				<!-- <image src="@/static/index/first.png"></image> -->
				<img class="m_img" src="@/static/index/first.png"></img>
				<view>我的认证</view>
			</view>
			<view class="modules">
				<!-- <image src="@/static/index/first.png"></image> -->
				<img class="m_img" src="@/static/index/second.png"></img>
				<view>我的客户</view>
			</view>
			<view class="modules">
				<!-- <image src="@/static/index/first.png"></image> -->
				<img class="m_img" src="@/static/index/third.png"></img>
				<view>业务中心</view>
			</view>
			<view class="modules">
				<!-- <image src="@/static/index/first.png"></image> -->
				<img class="m_img" src="@/static/index/four.png"></img>
				<view>财务课堂</view>
			</view>
		</view>
		<!-- 推荐课程 -->
		<view class="recommand">
		<text>好课推荐</text>
		<view class="recommand_container" v-for="index in 4" :key="index">
			<view class="recommand_containers"></view>
			<view class="recommand_containers"></view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				
			}
		},
		onLoad() {},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	// 轮播图
	image {
	  width: 100%;
	  height: 100%;
	  border-radius: 20rpx 20rpx;
	}
	.swiper{
		width: 90%;
		margin-left: 5%;
		border-radius: 20rpx 20rpx;
	}
	// 职位认证
	.job{
		display: flex;
		justify-content: center; 
		align-items: center;
		background-color: #fbf0e2;
		border-radius: 20rpx 20rpx;
		width: 90%;
		margin: 5% 5%; 
		height: 15vh; 
	}
	.job_container{
		display: flex;
		width: 90%;
		height: 80%;
	}
	.container1{
		flex: 1; 
		display: flex;
		flex-direction: column
	}
	.container2{
		flex: 1;
		display: flex;
		justify-content: center; 
		align-items: center;
	}
	.btn{
		display: flex;
		align-items: center;
		width: 60%;
		height: 40%; 
		font-size: 30rpx;
		background-color: #ffe1b2;
	}
	// 首页四个小模块
	.module{
		margin: 0 auto; 
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: 15vh;
	}
	.modules{
		display: flex;
		flex-direction:column;
		justify-content: center; 
		width: 20%;
		height: 90%;
		margin-left: 3%;
	}
	.m_img{
		margin-left: 20%;
		width: 60%;
		height: 60%;
	}
	// 推荐课程
	.recommand{
		margin: 0 auto;
		width: 90%;
		padding-top: 5%;
		font-size: 40rpx;
		font-weight: bold;
	}
	.recommand_container{
		display: flex;
		flex-wrap: wrap;
		justify-content: center; 
		background-color: #ffe1b2;
	}
	.recommand_containers{
		margin:10rpx 10rpx; 
		height:172rpx; 
		width: 45%;
		background-color: antiquewhite;
		border-radius: 20rpx 20rpx;
	}
</style>


